<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>事件、按键</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">
      事件处理 — Vue.js<br />
https://cn.vuejs.org/v2/guide/events.html<br />
      <br />
      <p>{{foo}}</p>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop.prevent="doA" href="http://www.baidu.com/">链接</a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">capture</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">click.self</div>

<div v-on:click.exact="doSomething">Do something</div>

<br />
换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。<br />
<input v-on:keyup.17="clear">
    </div>

    <script>

var obj = {
  foo:'文本'
}

var app = new Vue({
  el: '#app',
  data: obj,
  methods:{
    doA:function () {
      this.foo='a.click';
    },
    doThis:function(){
      this.foo='capture';
    },
    doSomething:function(){
      this.foo='doSomething';

    },
    clear:function(){
      this.foo='clear';
    }
  }
})


    </script>
  </body>
</html>
